﻿/*
 * Define the layout of the page.
 */

.categoryPage
{
    -ms-grid-rows: 120px 1fr 0px;
}

    .categoryPage .categoryList
    {
        width: 100%;
        height: 100%;
        margin-bottom: 4px;
    }

        .categoryPage .categoryList .win-item
        {
            width: 22%;
            height: 30%;
            margin-right: 8px;
            margin-bottom: 8px;
        }

            .categoryPage .categoryList .win-item:first-of-type
            {
                margin-left: 120px;
            }

        .categoryPage .categoryList .largeTileTextTemplate
        {
            width: 100%;
            height: 100%;
            display: -ms-grid;
            -ms-grid-columns: 1fr;
            -ms-grid-rows: 1fr 92px;
        }

        .categoryPage .categoryList .largeTileTextTemplateBackground
        {
            -ms-grid-row-span: 2;
            background-color: #333333;
            text-align: center;
        }

        .categoryPage .categoryList .largeTileTextTemplateOverlay
        {
            -ms-grid-row: 3;
            -ms-grid-row-align: stretch;
            background: rgba(122,122,122,1);
            padding: 8px 12px;
            opacity: 0.9;
        }

        .categoryPage .categoryList .largeTileTextTemplateLargeImg
        {
        }

        .categoryPage .categoryList .largeTileTextTemplateLargeText
        {
            font-size: 11pt;
            line-height: 15pt;
            max-height: 45pt;
            color: rgba(255,255,255,1);
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .categoryPage .categoryList .largeTileTextTemplateSmallText
        {
            font-size: 9pt;
            line-height: 15pt;
            color: rgba(255,255,255,0.49);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


@media screen and (-ms-view-state: snapped)
{
    .categoryPage .win-contentTitle
    {
        font-size: 11pt;
        line-height: 15pt;
    }

    .categoryPage header[role=banner]
    {
        display: -ms-grid;
        -ms-grid-columns: 48px 1fr;
        -ms-grid-rows: 1fr;
    }

    .categoryPage .categoryList
    {
        margin-top: 0px;
    }

        .categoryPage .categoryList .win-item
        {
            width: 282px;
            height: 44px;
            padding: 8px 0px 8px 8px;
            margin-bottom: 0px;
        }

        .categoryPage .categoryList .largeTileTextTemplate
        {
            display: -ms-grid;
            -ms-grid-columns: 44px 8px 1fr;
            -ms-grid-rows: 1fr;
        }

        .categoryPage .categoryList .win-item:first-of-type
        {
            margin-left: 4px;
        }

        .categoryPage .categoryList .largeTileTextTemplateBackground
        {
            -ms-grid-column: 1;
            -ms-grid-row-span: 1;
        }

        .categoryPage .categoryList .largeTileTextTemplateOverlay
        {
            -ms-grid-column: 3;
            -ms-grid-row: 1;
            -ms-grid-row-align: stretch;
            background: transparent;
            padding: 0;
        }

        .categoryPage .categoryList .largeTileTextTemplateLargeText
        {
            font-size: 11pt;
            line-height: 15pt;
            max-height: 30pt;
            color: inherit;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .categoryPage .categoryList .largeTileTextTemplateSmallText
        {
            display: none;
        }
    }
